import { useEffect } from 'react';
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import * as dat from 'dat.gui';

function SimpleCubeWithLight() {
  useEffect(() => {
    // --------------- 初始化场景
    const scene = new THREE.Scene();

    // 相机
    const camera = new THREE.PerspectiveCamera(
      45,
      window.innerWidth / window.innerHeight,
      0.1,
      100
    );
    camera.position.set(0, 10, 10);

    // 渲染器
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // 控制器
    const controls = new OrbitControls(camera, renderer.domElement);
    controls.target.set(0, 5, 5);
    controls.update();

    // ----------------------- 物体
    // 平面
    const planeSize = 40;
    const texture = new THREE.TextureLoader().load('/masaike.png');
    texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
    texture.repeat.set(planeSize / 2, planeSize / 2);
    const plane = new THREE.Mesh(
      new THREE.PlaneGeometry(planeSize, planeSize),
      new THREE.MeshPhongMaterial({ map: texture, side: THREE.DoubleSide })
    );
    plane.rotation.x = -Math.PI / 2;
    scene.add(plane);

    // 立方体
    const cubeSize = 3;
    const cube = new THREE.Mesh(
      new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize),
      new THREE.MeshPhongMaterial({ color: '#8AC' })
    );
    cube.position.set(cubeSize + 2, cubeSize / 2, 0);
    scene.add(cube);

    // 球体
    const sphere = new THREE.Mesh(
      new THREE.SphereGeometry(1.5, 32, 16),
      new THREE.MeshPhongMaterial({ color: '#CA8' })
    );
    sphere.position.set(-4, 1.5, 0);
    scene.add(sphere);

    // ---------------------------- 光源
    // 创建点光源
    const light = new THREE.PointLight(0xffffff, 1);
    light.position.set(0, 10, 0);
    scene.add(light);

    const helper = new THREE.PointLightHelper(light);
    scene.add(helper);

    // GUI 辅助类
    class ColorGUIHelper {
      constructor(object, prop) {
        this.object = object;
        this.prop = prop;
      }
      get value() {
        return `#${this.object[this.prop].getHexString()}`;
      }
      set value(hexString) {
        this.object[this.prop].set(hexString);
      }
    }

    function updateLight() {
      helper.update(); // 只需要更新 helper
    }

    // GUI 控制
    const gui = new dat.GUI();
    gui.addColor(new ColorGUIHelper(light, 'color'), 'value').name('Color');
    gui.add(light, 'intensity', 0, 50, 1);
    gui.add(light, 'distance', 0, 40).onChange(updateLight);

    const positionFolder = gui.addFolder('Position');
    positionFolder.add(light.position, 'x', -10, 10).onChange(updateLight);
    positionFolder.add(light.position, 'y', 0, 10).onChange(updateLight);
    positionFolder.add(light.position, 'z', -10, 10).onChange(updateLight);
    positionFolder.open();

    // 动画循环
    function animate() {
      requestAnimationFrame(animate);
      renderer.render(scene, camera);
    }
    animate();

    // 清理函数
    return () => {
      gui.destroy();
      controls.dispose();
      scene.remove(light);
      scene.remove(helper);
      document.body.removeChild(renderer.domElement);
      renderer.dispose();
    };
  }, []);

  return <div />;
}

export default SimpleCubeWithLight;
